<!--
    工单流程设置
-->
<template>
    <div class="flex-row">
        <el-container>
            <el-aside width="250px" class="lay-side">
                <aside-search ref="asideSearch" :clickEvent="clickEvent" :isRoom="false"
                    :showData="asideLevel"></aside-search>
            </el-aside>
            <el-main>
                <div class="content-row">
                    <div class="nuclein-query">
                        <div>工单流程设置</div>
                        <div style="margin-left: auto;">
                            <!-- <el-button type="primary" size="small" @click="handlerAdd()">新建工单</el-button> -->
                        </div>
                    </div>
                    <div style="height: 100%;">
                        <el-transfer style="text-align: left; display: inline-block;height: 100%;" v-model="value"
                            filterable :titles="['师傅列表', '选中的师傅']" :button-texts="['取消', '选择']"
                            :format="{ noChecked: '${total}', hasChecked: '${checked}/${total}' }"
                            @change="handleChange" :data="dataList">
                        </el-transfer>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import AsideSearch from '../../components/asideSearch.vue'
import { maintenance } from '../../api/api'
export default {
  name: 'test',
  components: { AsideSearch },
  data () {
    return {
      asideLevel: ['all', 'estate', 'alley', 'building'],
      asideSelected: {
        add: true,
        type: 'all',
        id: 0,
        label: '全部'
      },
      page: 1,
      size: 40,
      dataList: [], // 获取的数据
      value: [] // 选中的数据
    }
  },
  created () {
    // this.getDeviceId()
    this.gitList()
  },
  methods: {
    clickEvent (obj, node, el) {
      this.asideSelected = {
        type: obj.type,
        id: obj.id,
        label: obj.label,
        estate: { label: '', id: null },
        building: { label: '', id: null },
        alley: { label: '', id: null }
      }
      const data = {
        page: this.page,
        size: this.size,
        estateId: obj.id ? obj.id : null
      }
      maintenance({ ...data }).then(res => {
        if (res.code == 0) {
          const { records } = res.page
          if (records.length != 0) {
            this.gitList()
            records.forEach((item, index) => {
              this.value.push(item.userId)
            })
          } else {
            this.value = []
            this.gitList()
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleChange (value, direction, movedKeys) {},
    // 获取
    gitList () {
      const data = {
        page: this.page,
        size: this.size,
        estateId: this.asideSelected.id ? this.asideSelected.id : null
      }
      maintenance({ ...data }).then(res => {
        if (res.code == 0) {
          const { records } = res.page
          if (records.length != 0) {
            this.dataList = records.map(item => {
              return {
                label: item.userName,
                key: item.userId
              }
            })
          } else {
            this.dataList = []
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.el-main {
    margin: 0px;
    padding: 0px;
}

/* .content-row {
    padding: 20px;
} */

.content-row {
    height: 80%;
}

.nuclein-query {
    display: flex;
    align-items: center;
    padding: 10px 20px 20px 20px;
}

::v-deep .el-transfer {
    min-width: 650px;
}

::v-deep .el-transfer-panel {
    width: 30%;
    height: 100%;
}

::v-deep .el-transfer-panel__body {

    height: 100%;
}

::v-deep .el-transfer-panel__list {
    height: 100%;
}

::v-deep .el-transfer-panel__list.is-filterable {
    height: 100%;
}
</style>
